<template>
  <div class="list-wrapper scene-list-wrapper">
    <div class="page-header">
      <h1 class="title">靶标场景</h1>
      <el-button type="primary" @click="toCreateScene">新增场景</el-button>
    </div>
    <SearchList :searchList="typeList" @clickItem="clickItem" />
    <div class="container-wrapper">
      <div class="list scene_container_ref">
        <div class="scenes-list-card-container">
          <div v-for="(item, index) in list" :key="item.ID" class="scenes-list-card">
            <div class="scene-card" :class="'cardList_' + index">
              <!-- 场景卡片标题 -->
              <div class="scene-card__header">
                <el-tooltip :content="'名称：' + item.name">
                  <div class="scene-card__title-underline">
                    <h3 class="scene-card__title">{{ item.name }}</h3>
                    <div class="title-underline"></div>
                  </div>
                </el-tooltip>
              </div>

              <!-- 场景卡片封面 -->
              <div class="scene-card__cover">
                <img :src="item.cover" class="scene-card__image" @error.once="useDefaultImage" />
              </div>

              <!-- 场景卡片内容 -->
              <div class="scene-card__content">
                <!-- 场景卡片标签 -->
                <div class="scene-card__tags" :title="showTagTitle(
                  (item.sceneTypeName + ',' + item.labelName).split(','),
                )
                  ">
                  <div class="scene-card__tag scene-card__tag--label"
                    v-for="(type, typeIndex) in item.sceneTypeName.split(',')" :key="'type-' + index + '-' + typeIndex">
                    {{ type }}
                  </div>
                </div>

                <!-- 场景卡片描述 -->
                <div class="scene-card__description">
                  <el-tooltip v-if="item.comment">
                    <template #content>
                      <div v-html="tolotipSet(item.comment)"></div>
                    </template>
                    <p class="scene-card__comment">{{ item.comment }}</p>
                  </el-tooltip>
                  <p class="scene-card__comment" v-else>{{ item.comment }}</p>
                </div>

                <div class="template-actions" style="display: flex;justify-content: flex-end">
                  <el-button type="primary" size="small" @click="toInfo(item, $event)">预览</el-button>
                  <el-button type="primary" size="small" @click="createTactical(item, $event)">创建战术</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination-container">
        <el-pagination v-if="total" v-model:current-page="page" v-model:page-size="pageSize"
          :page-sizes="[8, 16, 32, 64]" background layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  getSceneList,
  getSceneType,
} from '@/api/topo/topo';
import SearchList from '@/components/search/searchList.vue';
import { emitter } from '@/utils/bus';
import { allCount } from '@/layout/notification/service/service';
const list = ref([]);
const page = ref(1);
const pageSize = ref(8);
const total = ref(0);

const typeList = ref(null);
const keyword = ref('');
import debounce from 'lodash/debounce';
const sceneType = ref(null);
let defaultThumbnail = new URL(
  '../../../assets/404_images/topo_default.png',
  import.meta.url,
);
import { useRouter } from 'vue-router';
const router = useRouter();

// 跳转到创建战术页面
const toCreateScene = () => {
  router.push('/create-tactical');
};

function useDefaultImage(event) {
  event.target.src = defaultThumbnail;
}

function tolotipSet(text) {
  let str = '';
  if (text && text.length) {
    for (let i = 0; i < text.length; i++) {
      str += text[i];
      if (i % 30 === 29) {
        str += '<br />';
      }
    }
    text = str;
  }
  return text;
}

const toInfo = (data) => {
  router.push({
    name: 'SceneDetail',
    query: {
      id: data.ID,
      name: data.name,
    },
  });
};

const createTactical = (data) => {
  router.push({
    name: 'CreateTactical',
    query: {
      id: data.ID,
      name: data.name,
    },
  });
};
const getSceneTypeFunc = async () => {
  let res = await getSceneType();
  if (!(res instanceof Error)) {
    typeList.value = res.data.data;
  }
};
onUnmounted(() => {
  emitter.off('Task', taskFunc);
});
const taskFunc = async data => {
  const { msg } = data;
  const info = msg.update || msg.create;
  allCount.value = msg.count;
  if (info) {
    const flg =
      list.value.length && list.value.some(el => el.taskID === info.ID);
    if (flg) {
      onGetSceneList();
      getSceneTypeFunc();
    }
  }
};
// WebSocket 监控同步组件任务完成情况
emitter.on('Task', taskFunc);
const clickItem = async item => {
  sceneType.value = item.key == 'all' ? '' : item.key;
  onGetSceneList();
};
onMounted(async () => {
  onGetSceneList();
  await getSceneTypeFunc();
});
const handleSizeChange = val => {
  pageSize.value = val;
  onGetSceneList();
};
const handleCurrentChange = val => {
  page.value = val;
  onGetSceneList();
};

/**
 * 获取场景管理（防抖）
 * @type {DebouncedFuncLeading<(function(): Promise<void>)|*> | DebouncedFunc<(function(): Promise<void>)|*>}
 */
const onGetSceneList = debounce(async () => {
  const res = await getSceneList({
    page_index: page.value,
    page_size: pageSize.value,
    keyword: keyword.value,
    sceneType: sceneType.value,
  });
  let data = res.data;
  list.value = data.list.map(item => {
    item.sceneType = item.sceneType ? item.sceneType.split(',') : [];
    item.label = item.label ? item.label.split(',') : [];
    return item;
  });

  total.value = data.total || 0;
}, import.meta.env.VITE_INPUT_DEBOUNCE_TIME);

// 返回tag拼接title
const showTagTitle = tagArr => {
  let str = '';
  tagArr.forEach(item => {
    str += item + '  ';
  });

  return str;
};
</script>

<style lang="scss" scoped>
.list-wrapper {
  border-radius: 5px;

  .search-wrapper {
    display: flex;
    padding: 10px;

    :deep(.el-input) {
      width: 200px;

      .el-input__wrapper {
        background: #fff;
      }
    }
  }

  .search-wrapper-button {
    margin-left: 10px;
  }

  .scene-card__tags {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;

    .scene-card__tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 3px 8px;
      height: 24px;
      font-size: 12px;
      border-radius: 4px;
      margin-right: 5px;
      margin-bottom: 5px;
      transition: all 0.3s ease;
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: default;

      &:hover {
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      &--type {
        color: #e6a23c;
        background-color: rgba(245, 108, 108, 0.1);
        border: 1px solid rgba(245, 108, 108, 0.3);
        font-weight: 500;
        position: relative;

        &:hover::before {
          display: inline;
        }
      }

      &--label {
        color: #1e90ff;
        background-color: rgba(30, 144, 255, 0.08);
        border: 1px solid rgba(30, 144, 255, 0.25);
        font-weight: normal;
        position: relative;
        vertical-align: bottom;

        &:hover::before {
          display: inline;
        }
      }
    }
  }

  .search {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .el-pagination {
      width: fit-content;
    }
  }

  .container-wrapper {
    .scenes-list-card-container {
      width: 100%;
      margin-top: 20px;
      box-sizing: border-box;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 20px;

      &::before,
      &::after {
        display: none;
      }



      .scenes-list-card {
        box-sizing: border-box;
        margin: 0;
      }

      .scene-card {
        position: relative;
        padding: 15px 10px;
        background: #ecf5ff;
        border-radius: 6px;
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease,
          background 0.3s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
        animation: fadeIn 0.5s ease-in-out;
        transform-origin: center bottom;
        overflow: hidden;
        will-change: transform;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-image: linear-gradient(45deg,
              rgba(30, 144, 255, 0.06) 25%,
              transparent 25%),
            linear-gradient(-45deg,
              rgba(30, 144, 255, 0.06) 25%,
              transparent 25%),
            linear-gradient(45deg,
              transparent 75%,
              rgba(30, 144, 255, 0.06) 75%),
            linear-gradient(-45deg,
              transparent 75%,
              rgba(30, 144, 255, 0.06) 75%);
          background-size: 24px 24px;
          background-position: 0 0, 0 12px, 12px -12px, -12px 0px;
          opacity: 0;
          transition: opacity 0.4s ease;
          z-index: 0;
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
        }

        &:hover {
          transform: translateY(-4px) scale(1);
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
          background: linear-gradient(135deg,
              #e6f7ff 0%,
              #c8e6ff 50%,
              #a8d8ff 100%);
          z-index: 1;

          &::before {
            opacity: 0.8;
          }
        }

        &>* {
          position: relative;
          z-index: 1;
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
        }

        &__checkbox {
          position: absolute;
          top: 12px;
          right: 12px;
          z-index: 2;
          opacity: 0.7;
          transition: opacity 0.3s ease;

          &:hover {
            opacity: 1;
          }
        }

        &__header {
          margin-bottom: 12px;
          position: relative;
        }

        &__title-underline {
          position: relative;
          display: flex;
          flex-direction: column;
          transition: all 0.3s ease;

          .title-underline {
            width: 40px;
            height: 3px;
            background-color: #1e90ff;
            border-radius: 1.5px;
            margin-top: 2px;
            transition: all 0.3s ease;
            cursor: default;
          }
        }

        &__title {
          font-size: 16px;
          font-weight: 600;
          color: #2c3e50;
          margin: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: break-all;
          transition: all 0.3s ease;
          width: 86%;
          cursor: default;
        }

        &:hover &__title-underline {
          .title-underline {
            width: 80px;
            background-color: #0066cc;
          }
        }

        &:hover &__title {
          color: #0066cc;
        }

        &__cover {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
          border-radius: 10px;
          margin-bottom: 12px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
          transition: all 0.4s ease;
          position: relative;

          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0);
            transition: background 0.3s ease;
            z-index: 1;
          }

          &:hover {
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);

            &::before {
              background: rgba(0, 0, 0, 0.05);
            }
          }
        }

        &__image {
          height: 150px;
          transition: transform 0.4s ease;
          transform: translateZ(0);

          &:hover {
            transform: scale(1.08);
          }
        }

        &__content {
          flex: 1;
          display: flex;
          flex-direction: column;
        }

        &__cluster-actions {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;
          width: 100%;
        }

        &__cluster-modern {
          display: inline-flex;
          align-items: center;
          position: relative;
          max-width: calc(100% - 60px);
          background: transparent;
          padding: 4px 0;
          transition: all 0.25s ease;
          border-bottom: 1px solid #eaedf2;

          &::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 0;
            height: 1px;
            background-color: #1e90ff;
            transition: width 0.3s ease;
          }

          .cluster-icon {
            margin-right: 6px;
            flex-shrink: 0;
            opacity: 0.75;
            transition: all 0.25s ease;
            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
          }

          .cluster-name {
            font-size: 12px;
            color: #637396;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 120%;
            transition: all 0.25s ease;
            letter-spacing: 0.2px;
          }

          &:hover {
            &::after {
              width: 100%;
            }

            .cluster-icon {
              opacity: 1;
              transform: translateY(-1px);
            }

            .cluster-name {
              color: #1e90ff;
            }
          }
        }

        &__description {
          margin-bottom: 8px;
          background: rgba(30, 144, 255, 0.05);
          padding: 6px;
          border-radius: 6px;
          transition: all 0.3s ease;
          min-height: 25px;

          &:hover {
            background: rgba(30, 144, 255, 0.08);
          }
        }

        &__comment {
          font-size: 12px;
          color: #666666;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          // -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          word-break: break-all;
          margin: 0;
          line-height: 1.5;
        }

        &__tags {
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          word-break: break-all;
          text-overflow: ellipsis;
          margin-bottom: 8px;
          display: block;
          line-height: 1.8;

          .scene-card__tag {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 2px 8px;
            height: 24px;
            font-size: 12px;
            border-radius: 4px;
            margin-right: 5px;
            margin-bottom: 5px;
            transition: all 0.3s ease;
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: default;

            &:hover {
              transform: translateY(-2px) scale(1.03);
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }

            &--type {
              color: #e6a23c;
              background-color: rgba(245, 108, 108, 0.1);
              border: 1px solid rgba(245, 108, 108, 0.3);
              font-weight: 500;
              position: relative;

              &:hover::before {
                display: inline;
              }
            }

            &--label {
              color: #1e90ff;
              background-color: rgba(30, 144, 255, 0.08);
              border: 1px solid rgba(30, 144, 255, 0.25);
              font-weight: normal;
              position: relative;
              vertical-align: bottom;

              &:hover::before {
                display: inline;
              }
            }
          }
        }

        &__actions {
          display: none;
        }
      }
    }

    .list {
      overflow-y: auto;
      padding: 5px;
      margin-top: -10px;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(15px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .search-list-container {
    .searchList {
      .textButton {
        button {
          width: 112px;
          height: 40px;
        }
      }
    }
  }
}

.scenes-list-card {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

:deep(.add-or-edit-scene-dialog) {
  width: 630px;

  .el-form {
    max-width: 550px;

    .el-form-item__label {
      width: 80px;
    }
  }
}

.scene-list-search-tag {
  width: 160px;
  margin-left: 10px;
}

.batch-export-resource {
  max-width: 600px;
  padding-left: 20px;
}

:deep(.storage-dialog) {
  width: 560px;
}
</style>
